<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">

    <p:panel styleClass="imgHeader generalInputFormPanel newGroupPanel" rendered="#{administrationView.activePanel == 'NEW_USER_GROUP'}">
        <f:facet name="header">
            <h:graphicImage library="images" name="usergroup-16.png" />
            <h:outputText styleClass="title" value="#{msg['adminPage.userManagement.newGroup.title']}" />
        </f:facet>
        <h:panelGroup layout="block" styleClass="groupName">
            <h:outputText value="#{msg['adminPage.userManagement.groups.groupName']}" />
            <p:inputText id="newGroupName" value="#{groupManager.newGroupName}" required="true" requiredMessage="#{msg['adminPage.userManagement.newGroup.groupName.requiredMsg']}"
                         rendered="#{groupManager.modifiedGroup == null}" maxlength="60" />
            <p:inputText id="modifiedGroupName" value="#{groupManager.modifiedGroup.groupName}" required="true" requiredMessage="#{msg['adminPage.userManagement.newGroup.groupName.requiredMsg']}"
                         rendered="#{groupManager.modifiedGroup != null}" maxlength="60" />
            <p:message for="newGroupName" rendered="#{groupManager.modifiedGroup == null}" />
            <p:message for="modifiedGroupName" rendered="#{groupManager.modifiedGroup != null}" />
        </h:panelGroup>

        <h:outputText value="#{msg['adminPage.userManagement.newGroup.assignRole.label']}" style="font-weight: bold" />
        <p:dataGrid columns="4" value="#{groupManager.roles}" var="role" styleClass="roles">
            <p:selectBooleanCheckbox value="#{role.checked}" itemLabel="#{role.role}" />
        </p:dataGrid>
        <p:commandButton value="#{msg['Common.save']}" icon="save" action="#{groupManager.save}" update="@form" rendered="#{groupManager.modifiedGroup == null}" />
        <p:commandButton value="#{msg['Common.update']}" icon="save" action="#{groupManager.update}" update="@form" rendered="#{groupManager.modifiedGroup != null}" />
        <p:commandButton value="#{msg['Common.cancel']}" action="#{groupManager.cancel}" update="@form" icon="cancel" process="@this" >
            <f:actionListener type="org.omnifaces.eventlistener.ResetInputAjaxActionListener"/>
        </p:commandButton>
    </p:panel>
</ui:composition>